<markup>
<section data-view-id = "page1">
	<header>视图1</header>
	<h1>这是视图1</h1>

	<div class = "btn">进入视图2</div>
</section>
<section data-view-id = "page2">
	<header>
		<span class = "nav-back" data-view-rel = ":back"></span>视图2
	</header>

	<div class = "url">
		<label>当前URL：</label>
		<span></span>
	</div>

	<div class = "params"></div>

	<div class = "btn">更新参数</div>
</section>
</markup>
<link rel = "stylesheet" href = "demo/css/common.css"/>
<style>
.url{
	padding: 10px;
}
.url span{
	display: block;
	word-break: break-all;
	color: #9ab5cc;
	font-family: consolas, Serif;
	margin-top: 4px;
}
.params{
	counter-reset: index 0;
}
.param{
	position: relative;
	padding: 10px 10px 10px 30px;
	font-family: Consolas, sans-serif, serif;
}
.param:before{
	position: absolute;
	left: 10px;
	top: 10px;
	color: #999999;
	counter-increment: index 1;
	content: counter(index)".";
}
.param:nth-child(even){
	background-color: #FAFAFA;
}
.param .key{
	float: left;
}
.param .type{
	float: right;
	color: orange;
}
.param .value{
	display: block;
	margin-top: 4px;
}
.param .clear-float{
	display: block;
	clear: both;
}
</style>
<script>
var page1 = View.ofId("page1");
var btnObj = page1.find(".btn");
btnObj.addEventListener("click", function(){
	View.navTo("page2", {
		/**
		 * 虽然这里的赋值包含了数字、布尔 和 数组等类型，但由于
		 * 参数是通过URL传输的，所以page2收到的将全部是字符串
		 */
		options: {
			a: 1,
			b: "str",
			c: true,
			d: [123, "456"]
		}
	});
});

var page2 = View.ofId("page2");
var page2BtnObj = page2.find(".btn");
var page2UrlObj = page2.find(".url span");
var page2ParamsObj = page2.find(".params");

var buildParamObj = function(key, value){
	var divObj = document.createElement("div");
	util.addClass(divObj, "param");
	divObj.innerHTML = '<span class = "key"></span><span class = "type"></span><span class = "clear-float"></span><span class = "value"></span>';

	View.find(divObj, ".type").innerHTML = typeof key;
	View.find(divObj, ".key").innerHTML = key;
	View.find(divObj, ".value").innerHTML = String(value);

	return divObj;
};

var showUrlAndOptions = function(){
	/* 检索所有参数 */
	var options = View.getActiveViewOptions();
	if(null == options)
		return;

	/**
	 * 通过视图选项传递的参数都将体现在地址栏上
	 */
	page2UrlObj.innerHTML = location.href;

	page2ParamsObj.innerHTML = "";
	for(var name in options){
		var value = options[name];
		var paramObj = buildParamObj(name, value);

		page2ParamsObj.appendChild(paramObj);
	}
};

/**
 * 视图进入后展现收到的参数
 */
page2.on("enter", function(){
	showUrlAndOptions();
});

/**
 * 更新参数
 */
page2BtnObj.addEventListener("click", function(){
	View.setActiveViewOption("b", false);
	View.setActiveViewOption("d", {foo: "bar"});
	showUrlAndOptions();
});
</script>